<!-- 巡更管理-计划管理 -->
<template>
  <div class="app-container">
    <TopMenu v-if="showTopMenu" :data-list="topDataLabel" @tabsChange="tabsChange"/>
    <div class="main-info-container">
      <!-- 查询和其他操作 -->
      <div v-if="showTopMenu" class="filter-container">
        <el-form ref="form" :inline="true" :model="listQuery" class="form-bottom-line" label-width="80px">
          <el-form-item label="选择单位:">
            <el-select v-model="listQuery.corp_id" clearable filterable allow-create default-first-option autocomplete="off" placeholder="请选择单位名称" @change="companyChange">
              <el-option v-for="item in companyList" :key="item.corp_id" :label="item.name" :value="item.corp_id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-permission="['v1/patrol-plans/index']" type="primary" size="small" icon="el-icon-search" @click="handleFilter" >查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 查询结果 -->
      <div class="plan-list">
        <ul v-loading="listLoading" class="plan-list-ul">
          <li v-permission="['v1/patrol-plans/create']" class="addPlan" @click="handleAdd"><i class="el-icon-plus"/><span>添加新的巡更计划</span></li>
          <li v-for="item in list" :key="item.index">
            <div class="plan-title">
              <span :title="item.name" class="plan-name">{{ item.name }}</span>
              <i v-permission="['v1/patrol-plans/update']" class="el-icon-edit-outline" @click="iconEdit(item)"/>
              <el-switch v-permission="['v1/patrol-plans/enable']" v-model="item.is_forbidden" active-text="启用" inactive-text="禁用" active-color="#4CC1C8" inactive-color="#DA624A" @click.native.prevent="iconQiyong(item)"/>
            </div>
            <img :src="item.imgUrl" class="statusImg" alt="">
            <ul class="plan-content">
              <li><span class="plan-content-label">建筑群：</span><span class="plan-content-text">{{ item.park_name ? item.park_name : '' }}</span></li>
              <li><span class="plan-content-label">负责人：</span><span class="plan-content-text">{{ item.leader !=='null' ? JSON.parse(item.leader).nickname : '' }}</span></li>
              <li><span class="plan-content-label">开始时间：</span><span class="plan-content-text">{{ item.start_at * 1000, '{y}-{m}-{d}' | parseTime }}</span></li>
              <li><span class="plan-content-label">巡更时间：</span><span class="plan-content-text">{{ item.patrol_time }}</span></li>
              <li><span class="plan-content-label">巡更频次：</span><span class="plan-content-text">一天{{ item.frequency }}次</span></li>
              <!-- <li><span class="plan-content-label">重复：</span><span class="plan-content-text">{{ item.repeat_type }}</span></li> -->
              <li><span class="plan-content-label">巡更点数：</span><span class="plan-content-text">{{ item.pointsNum }}/个</span></li>
              <li><span class="plan-content-label">平均时长：</span><span class="plan-content-text">{{ item.patrol_at }}</span></li>
            </ul>
          </li>
        </ul>
      </div>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :page-sizes="[7, 15, 23, 31]" :limit.sync="listQuery.offset" @pagination="getList" />
      <formPlan
        v-if="formPlan"
        :dialog-form="dialogForm"
        :dialog-form1="dialogForm1"
        :dialog-form2="dialogForm2"
        :dialog-type="dialogType"
        @getCancel="handleCancel"
        @closeBindWarnStandard="handleCloseBindWarnStandard"
        @submitForm="submitForm"/>
    </div>
  </div>
</template>
<script>
import { companyList, getSocialUnit } from '@/api/company'
import { patrolPlansList, patrolPlansUpdate } from '@/api/patrolPlans'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import formPlan from './components/formPlan.vue'
import TopMenu from '@/components/TopMenu' // 顶部菜单
import checkPermission from '@/utils/permission' // 权限判断函数
import enable from '@/assets/enable.png'
import prohibit from '@/assets/prohibit.png'
import { parseTime } from '@/utils/index'

export default {
  name: 'Order',
  components: { Pagination, formPlan, TopMenu },
  data() {
    return {
      topDataLabel: {
        data: []
      },
      showTopMenu: false,
      formPlan: false,
      enable,
      prohibit,
      // 新增修改弹窗信息
      dialogForm: {
        corp_id: '',
        corp_name: '',
        park_name: '',
        name: '',
        frequency: '',
        cycle_content: [],
        start_at: '',
        points: '',
        repeat_type: '',
        leader: '',
        workers: []
      },
      dialogForm1: {
        frequency: '',
        plan_list: [{
          label: '',
          begin_time: '',
          hour: '',
          minute: ''
        }]
      },
      dialogForm2: {
        patrolPoint: []
      },
      list: [],
      dialogType: '添加',
      // 表格信息
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        offset: 7,
        corp_id: '',
        corp_name: '',
        sort: 'id',
        order: 'desc'
      },
      companyList: []
    }
  },
  created() {
    this.getList()
    this.getCompanyList()
  },
  methods: {
    // 列表查询
    checkPermission,
    getList() {
      this.listLoading = true
      const that = this
      patrolPlansList(this.listQuery)
        .then(response => {
          that.list = []
          response.data.data.data.forEach(function(value, index, array) {
            array[index].is_forbidden = array[index].is_forbidden === '2' || array[index].is_forbidden === 2
            array[index].pointsNum = JSON.parse(array[index].points).length
            array[index].is_forbidden ? array[index].imgUrl = enable : array[index].imgUrl = prohibit
            that.list.push(array[index])
          })
          that.total = parseInt(response.data.data.total_count)
          that.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      this.setTimeoutFn()
      this.getList()
    },
    // 启用/禁用
    iconQiyong(data) {
      const that = this
      var flag = !data.is_forbidden ? '启用' : '禁用'
      this.$confirm('此操作将' + flag + '该行数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        var params = data
        params.start_at = parseTime(params.start_at * 1000, '{y}-{m}-{d}')
        params.is_forbidden = flag === '启用' ? 1 : 2
        patrolPlansUpdate(params)
          .then((res) => {
            const data = res.data
            if (data.code === 40000) {
              that.$message.success(data.message)
            } else {
              that.$message.warning(data.message)
            }
            that.getList()
          })
          .catch(() => {
            that.getList()
          })
      }).catch(() => {
        that.getList()
      })
    },
    // 新增计划
    handleAdd() {
      this.formPlan = true
      this.dialogForm = {
        corp_id: '',
        corp_name: '',
        park_id: '',
        name: '',
        cycle_content: [],
        start_at: '',
        frequency: '',
        points: '',
        repeat_type: '',
        leader: '',
        workers: ''
      }
      this.dialogForm1 = {
        frequency: '',
        plan_list: []
      }
      this.dialogForm2 = {
        patrolPoint: []
      }
      this.dialogType = '添加'
    },
    // 修改计划
    iconEdit(data) {
      this.formPlan = true
      this.dialogForm2.patrolPoint = [0]
      this.dialogType = '修改'
      this.dialogForm = JSON.parse(JSON.stringify(data))
      this.dialogForm.leader = this.dialogForm.leader !== 'null' ? JSON.parse(this.dialogForm.leader).uuid : ''
      var workers = []
      if (this.dialogForm.workers && JSON.parse(this.dialogForm.workers)) {
        JSON.parse(this.dialogForm.workers).forEach(item => {
          workers.push(item.uuid)
        })
      }
      this.dialogForm.workers = workers
      this.dialogForm.start_at = parseTime(this.dialogForm.start_at * 1000, '{y}-{m}-{d}')
      console.log(this.dialogForm.start_at)
      this.dialogForm1.frequency = this.dialogForm.frequency
      this.dialogForm1.plan_list = []
      this.dialogForm.cycle_content = JSON.parse(this.dialogForm.cycle_content)
      for (var i = 0; i < this.dialogForm.cycle_content.length; i++) {
        this.dialogForm1.plan_list.push({
          label: '开始时间',
          begin_time: this.dialogForm.cycle_content[i].start,
          hour: this.dialogForm.cycle_content[i].interval_hour,
          minute: this.dialogForm.cycle_content[i].interval_min
        })
      }
      this.dialogForm2.patrolPoint = []
      this.dialogForm.points = JSON.parse(this.dialogForm.points)
      for (var k = 0; k < this.dialogForm.points.length; k++) {
        this.dialogForm2.patrolPoint.push(this.dialogForm.points[k].point_id)
      }
      console.log(this.dialogForm)
    },
    // 新增弹窗确认
    submitForm(formName) {
      this.formPlan = false
      this.getList()
    },
    handleCancel() {
      this.formPlan = false
    },
    // 关闭弹窗
    handleCloseBindWarnStandard() {
      this.formPlan = false
    },
    // 顶部切换监听
    tabsChange(value) {
      const that = this
      this.companyList.forEach(function(data, index, array) {
        if (value === array[index].name) {
          that.listQuery.corp_id = array[index].corp_id
        }
      })
      this.getList()
    },
    setTimeoutFn() {
      const that = this
      this.listLoading = true
      setTimeout(function() {
        that.listLoading = false
      }, 1000)
    },
    // 单位下拉框
    companyChange(value) {
      if (value !== '') {
        var select = {}
        this.companyList.forEach(function(data, index, array) {
          if (value === array[index].corp_id) {
            select = array[index]
          }
        })
        if (this.topDataLabel.data.indexOf(select.name) === -1) {
          this.topDataLabel.data.push(select.name)
        }
      }
    },
    // 单位下拉框查询
    getCompanyList() {
      const that = this
      companyList()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.companyList = []
            that.companyList = data.data.data
            if (that.companyList && that.companyList.length > 0) {
              that.corp_id = that.companyList[0].corp_id
              that.corp_name = that.companyList[0].name
            }
            that.showTopMenu = true
          } else if (data.code === 40003 && data.message === '权限验证失败!') {
            that.showTopMenu = false
            that.getSocialUnit()
          }
        })
        .catch(() => {
          that.companyList = []
        })
    },
    getSocialUnit() {
      const that = this
      getSocialUnit()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            if (data.data && data.data.length > 0) {
              that.corp_id = data.data[0].corp_id
              that.corp_name = data.data[0].name
            }
          }
        })
        .catch(() => {
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.filter-container{
  padding-left: 20px;
}
.plan-list{
  ul{
    padding:10px;
    margin: 0;
    overflow: hidden;
  }
  .plan-list-ul>li{
    width: 23%;
    height: 274px;
    float: left;
    margin: 0 1% 15px 1%;
    position: relative;
    list-style: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 6px;
    box-shadow:0px 1px 5px 1px rgba(0,0,0,0.24);
    .plan-title{
      height: 36px;
      line-height: 36px;
      border-bottom: 1px solid #D1D0D0;
      position:relative;
      span{
        display: block;
      }
      .plan-name{
        width: 62%;
        height: 36px;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #E8441C;
        color: #FFFFFF;
        border-radius: 6px 0 0 0;
        padding: 0 6px;
        text-overflow:ellipsis;
        white-space: nowrap;
        font-size: 12px;
      }
      .plan-place{
        width: 100%;
        height: 36px;
        overflow: hidden;
        padding-left: 80px;
        font-size: 14px;
        padding-right: 80px;
        text-align: center;
        box-sizing: border-box;
      }
      .el-switch{
        position: absolute;
        right: 22px;
        top: 0;
        margin-top: 6px;
        overflow: hidden;
      }
      i{
        position: absolute;
        right: 0;
        top: 0;
        color: #36B4F7;
        font-size: 20px;
        margin: 9px 2px 0 2px;
        cursor: pointer;
      }
    }
    .plan-content{
      padding:15px 20px;
      li{
        list-style: none;
        height: 26x;
        line-height: 26px;
        font-size: 14px;
      }
      .plan-content-label{
        color: #858282;
      }
      .plan-content-text{
        color: #292828;
      }
    }
    .statusImg{
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 10;
      width: 80px;
    }
  }
  li.addPlan{
    text-align: center;
    cursor: pointer;
    i{
      color: #E8441C;
      font-size: 120px;
      margin-top: 77px;
    }
    span{
      position: absolute;
      left: 0;
      bottom: 30px;
      display: block;
      width: 100%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #717070;
    }
    &:hover{
      box-shadow:0px 1px 5px 5px rgba(0,0,0,0.24);
    }
  }
  &::after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
  }
}
.mobile .plan-list-ul>li{
  width: 100%;
  padding-right: 5px;
}
</style>
